<template>
  <div class="page">
    <navigation>{{ $t('新建提币地址') }}</navigation>
    <div class="form">
      <div class="form-item">
        <i class="lab iconfont icon-xingmingyonghumingnicheng"></i>
        <input v-model="form.title" type="text" class="form-inp" :placeholder="$t('昵称')">
      </div>
      <div class="form-item">
        <i class="lab iconfont icon-dizhi"></i>
        <input v-model="form.addr" type="text" class="form-inp" :placeholder="$t('提币地址')">
        <button type="button" class="qr"><i class="icon"></i></button>
      </div>
      <div class="form-item">
        <i class="lab iconfont icon-qianbao"></i>
        <label class="form-select">
          <input class="form-inp" type="text" :placeholder="$t('币种')" :value="form.coin_symbol" readonly @click="showPopup">
          <mt-spinner v-if="coinList.length === 0" type="triple-bounce" class="spinner"></mt-spinner>
          <!-- <select v-if="coinList.length > 0" v-model="form.coin_symbol" class="form-inp">
            <option v-for="(item, index) in coinList" :key="index" :value="item.symbol" :selected="form.coin_symbol == item.symbol">{{ item.symbol }}</option>
          </select> -->
        </label>
        <i class="iconfont icon-jiantouarrow487"></i>
      </div>
      <div class="form-item">
        <i class="lab iconfont icon-chazhaojilu"></i>
        <input v-model="form.description" type="text" class="form-inp" :placeholder="$t('备注')">
      </div>
    </div>
    <div class="ftbtns">
      <button v-if="type==='edit'" type="button" class="btn del" @click="deleteAddr">{{ $t('删除') }}</button>
      <button type="button" class="btn" @click="sendAddr">{{ $t('完成') }}</button>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="bottom"
    >
      <mt-picker :slots="slots" @change="handlePicker"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import storage from '@/utils/storage'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      form: {},
      coinList: [],
      type: '',

      popupVisible: false,
      slots: [
        {
          values: [],
          className: 'slot1',
          flex: 1,
          textAlign: 'center'
        }
      ]
    }
  },
  mounted () {
    this.type = this.$route.query.type
    if (this.type === 'edit') {
      this.form = JSON.parse(storage.get('addrData'))
    }
    this.getCoinList()
      .then((data) => {
        this.coinList = data.data.data
        this.slots[0].values = this.coinList.map(item => item.symbol)
      })
  },
  destroyed () {
    storage.remove('addrData')
  },
  methods: {
    ...mapActions({
      getCoinList: 'user/getCoinList',
      addAddress: 'user/addAddress',
      editAddress: 'user/editAddress',
      delAddress: 'user/delAddress'
    }),
    sendAddr () {
      if (this.loading) { return false }
      const payload = this.form
      if (payload.id) {
        payload.addr_id = payload.id
      }
      do {
        if (!payload.title) {
          this.errmsg = this.$t('请输入昵称')
          break
        }
        if (!payload.addr) {
          this.errmsg = this.$t('请输入提币地址')
          break
        }
        if (!payload.coin_symbol) {
          this.errmsg = this.$t('请选择币种')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      this.loading = true
      this[this.type + 'Addr'](payload)
    },
    editAddr (payload) {
      this.editAddress(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .finally((data) => {
          this.loading = false
        })
    },
    addAddr (payload) {
      this.addAddress(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .finally((data) => {
          this.loading = false
        })
    },
    deleteAddr () {
      if (this.loading) { return false }
      const payload = {
        addr_id: this.form.id
      }
      this.delAddress(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally((data) => {
          this.loading = false
        })
    },

    showPopup () {
      if (this.coinList.length > 0) {
        this.popupVisible = true
      }
    },
    handlePicker (picker, values) {
      this.form.coin_symbol = values[0]
      this.form = {
        ...this.form,
        coin_symbol: values[0]
      }
    }
  }
}
</script>
<style scoped>
.form {
  background-color: #fff;
  padding-bottom: 40px;
}
.form-item {
  position: relative;
  padding: 10px 15px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-item:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 55px;
  right: 0;
  height: 0;
  border-bottom: 1px solid #eee;
}
.form-item .lab {
  flex-shrink: 0;
  width: 25px;margin-right: 15px;
  text-align: center;
}
.form-inp {
  flex-grow: 1;
  font-size: inherit;
  line-height: inherit;
  font-size: 15px;
}
.form-inp:read-only {
  cursor: pointer;
}
.form-item .lab,
.form-item .val {
  font: inherit;
  font-size: 18px;
}
.spinner {
  position: absolute;
  height: 100%;
  top: 0;
  left: 46px;
  z-index: 4;
}
.form-select {
  flex-grow: 1;
  position: relative;
}
.form-select input.form-inp {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  background-color: #fff;
  pointer-events: none;
}
.form-select select.form-inp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  opacity: 0;
}
.ftbtns {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbtns .btn {
  flex: 1 0 0;
  line-height: 40px;
  background: #1b8afe;
  text-align: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  letter-spacing: 4px;
}
.ftbtns .del {
  background-color: #ccc;
}
</style>
